<template>
  <div class="body">
    <div class="row">
       <span class="label">院校省份:</span>
       <div class="checkbox-group">
        <el-checkbox-group size="small" v-model="checkboxGroup1" fill="#f34d41" @change="handleCheckboxChange">
          <el-checkbox-button v-for="city in cities" border :label="city" :key="city">{{ city }}</el-checkbox-button>
        </el-checkbox-group>
        </div>
    </div>
    <div class="row">
      <div class="label">院校类型:</div>
      <div class="checkbox-group">
      <el-radio-group v-model="category" @change="handleCategory" fill="#f34d41" size="small">
        <el-radio-button v-for="type in types" :key="type" :label="type">{{ type }}</el-radio-button>
      </el-radio-group>
      </div>
    </div>
      <div class="row">
      <div class="label">院校层次:</div>
      <div class="checkbox-group">
      <el-radio-group v-model="tag" @change="handleTag" fill="#f34d41" size="small">
      <el-radio-button label="不限"/><el-radio-button label="985"/><el-radio-button label="211"  />  <el-radio-button label="双一流"/>
      <el-radio-button label="省重点"/> <el-radio-button label="公办"/><el-radio-button label="民办"/>
      <el-radio-group v-model="universityType" @change="handleUniversityType" fill="#f34d41" size="small">
      <el-radio-button label="本科"></el-radio-button>
      <el-radio-button label="专科"></el-radio-button>
      </el-radio-group>
      </el-radio-group>
      </div>
    </div>
    <div class="row" style="margin-top:40px;">
      共:<span :v-model="this.total" style="color:red;margin-right:5px;margin-left:5px">{{this.total}}</span>条
  <el-input placeholder="输入院校名称" style="width: 55%; position: absolute;margin-left:11vh; margin-top: -9px;" v-model="name">
    <el-button slot="append" style="background: #ff6500; color: white" @click="pageQuery">搜索</el-button>
  </el-input>
  <!-- style="margin-left: 75%; width: 50%;margin-top:10vh" -->
  <div class="hot-articles" >
    <h2>
      <svg-icon icon-class="fire-solid" style="width: 25px; height: 25px; margin-right: 10px"></svg-icon>
      热门院校
    </h2>
    <ul>
      <li v-for="(university, index) in hotUniversity" :key="index">
        <div class="article-card">
          <div :class="['rank', 'rank-' + (index + 1), index >= 3 ? 'rank-n' : '']">
            {{ index + 1 }}
          </div>
          <div class="article-info">
            <el-button type="text" style="color:black" @click="()=>{handleSkip(university.id)}">{{university.name}}</el-button>
          </div>
        </div>
      </li>
    </ul>
  </div></div>
<div  style=" width: 40%;margin-top:40px">
<div   v-for="university in universityList" :key="university" class="university">
<div class="university-info">
    <img width="10%" style="margin-top:-10px;margin-right:20px" :src="university.logo">
    <div class="university-details">
      <el-button type="text" class="name" @click="()=>{handleSkip(university.id)}">{{university.name}}</el-button>
      <span style="margin-left:34vh;margin-top:-3.5vh">排名</span>
      <span style="margin-left:65vh;margin-top:-2.5vh">热度</span>
      <div class="">
      <span class="universityType" v-for="tag in university.tags.split(';')" :key="tag">{{tag}}</span>
     
        <span style="position: absolute; top: 5vh; left: 47vh;">{{university.rank}}</span>
        <span style="position: absolute; top: 5vh; left: 77vh;">{{university.hot}}</span>
        <!-- 其他标签 -->
      </div>
    </div>
  </div>
     </div>

       <!-- 分页插件 -->
       <span v-show="total===0" style="margin-left:300px">暂无数据</span>
   <el-pagination
    style="margin-left:150px"
     hide-on-single-page
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page" 
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
    </div>
</template>

<script>
import{getCollegeList,getTop10}from '@/api/university'
const cityOptions = ['不限', '北京', '天津', '上海', '重庆', '河北', '山西', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '海南', '四川', '贵州', '云南', '陕西', '甘肃', '青海', '台湾', '内蒙古', '广西', '西藏', '宁夏', '新疆', '香港', '澳门'];
const typeOptions = ['不限', '综合', '理工', '财经', '农林','医药','师范','体育','政法','艺术','民族','军事','语言','其他'];
export default {

  data() {
    return {
      checkboxGroup1: ['不限'],
      cities: cityOptions,
      types:typeOptions,
      category:'不限',
      tag:'不限',
      universityType:'',
      name:'',
      page:'1',
      pageSize:'10',
      total:9,
      universityList:'',
      hotUniversity:[]
    }
  },
  methods: {
    //院校省份发生变化
    handleCheckboxChange(value) {
      //未选中时默认选中为全部
      if(value.length===0){
        this.checkboxGroup1=['不限']
        return
      }
      //点击全部按钮
      if (value.includes('不限') && value[value.length-1]==="不限") {
       this.checkboxGroup1=['不限']
           this.pageQuery()
      }else {
        //点击其他按钮
      this.checkboxGroup1 =[...value.filter(v => v !== '不限')]  
          this.pageQuery()
     /*  this.checkboxGroup1 = value.includes('全部') ? [...value.filter(v => v !== '全部')] : [...value];  */
      }
  
    },
    //院校类型发生变化
    handleCategory(){
      //请求后端查询
      this.pageQuery()
    },
    //院校层次发生变化
    handleTag(value){
      if(value==='不限'){
        this.universityType=''
      }
      this.pageQuery()
    },
    handleUniversityType(){
      this.tag=''
      this.pageQuery()
    },
    //分页查询
    pageQuery(){
    const params={"city":this.checkboxGroup1.includes('不限') ? null: this.checkboxGroup1,
                    "category":this.category==="不限"?'':this.category,"tag":this.tag==="不限"?'':this.tag,
                    "type":this.universityType===""?null:this.universityType==="本科"?1:2,"name":this.name,page:this.page,pageSize:this.pageSize}
    getCollegeList(params).then(res=>{
      if(res.data.code===1){
        //成功响应
        this.total=res.data.data.total
        this.universityList=res.data.data.records
      }
    })
    },
    //pageSize发生了变化
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.pageQuery()
    },
    //page发生了变化
    handleCurrentChange(page){
      this.page=page
      this.pageQuery()
    },
       //处理跳转
    handleSkip(id){
       //跳转到文章详情页面(addEmployee组件)
    this.$router.push({path:'universityDetail',query:{id:id}})
    }
  },created(){
   this.pageQuery()
   getTop10().then(res=>{
    if(res.data.code===1){
      this.hotUniversity=res.data.data
    }
   })
  }
};
</script>
</script>

<style scoped>
.row {
  position: relative;
  display: flex;
  width: 110%;
  margin-bottom: 20px;
}

.label {
  position: absolute;
  margin-right: 30px;
  margin-top:5px;
  font-size: 14px;
  z-index: 1;
}

.checkbox-group {
  margin-left: 90px;
  position: relative; /* 添加此行 */
  z-index: 0; /* 添加此行 */
}
.body {
  margin-left: 150px;
  margin-right: 300px;
  margin-top: 100px;
}

.hot-articles {
  flex: none;
  margin-left: 800px;
  margin-top: 0px;
  width: 300px;
position: absolute;
  /* 其他样式 */
}

h2 {
  font-size: 18px;
  margin-left: 20px;

}

ul {
  list-style: none;
  padding: 0;
}

.article-card {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  margin-right: -10px;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.rank {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  line-height: 20px;
  font-size: 15px;
  color: #fff;
  text-align: center;
}

.rank.rank-1 {
  background: linear-gradient(rgb(245, 91, 2), rgba(241, 102, 15, 0));
}

.rank.rank-2 {
  background: linear-gradient(rgba(249, 110, 17, 0.8), rgba(239, 184, 148, 0));
}

.rank.rank-3 {
  background: linear-gradient(rgba(251, 141, 67, 0.6), rgba(227, 163, 120, 0));
}

.rank.rank-n {
  background: #dcd5d5;
  color: #333;
}

.article-info {
  flex: 1;

}
.article-title {
  font-size: 12px;
  font-weight: bold;
  color: #333;
  /* 添加其他样式属性 */
}



.university {
  position: relative;
  width: 700px;
  height: 90px;

}
.university-info {
  display: flex;
  flex-direction: row;

  align-items: center;
}

.university-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

}


.name {
  margin-top: -10px;
  font-size: 18px;

  color: #08111b;

}



.universityType{
  display: inline-block;
  padding: 5px 10px;
  margin-right: 10px;
  margin-top:10px;
  border: 1px solid #bababb; /* 设置边框颜色为灰色 */
  border-radius: 4px;
  color: #d8d8dd; /* 标签字体颜色 */
  font-size: 12px;
}
</style>